<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>论坛会员页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;

            background-image: url(img/图片/TdNNyK5YeT.jpg);
        }

        header {
            background-color: white;
            color: #fff;
            text-align: center;
            padding: 10px 0;
        }

        nav {
            background-color: #f4f4f4;
            text-align: center;
            padding: 10px 0;
        }

        nav a {
            text-decoration: none;
            color: #333;
            margin: 0 10px;
        }

        h1 {
            color: #333;
        }
    </style>


</head>

<body>
    <header>
        <h1>论坛会员支付</h1>
    </header>
    <!-- <nav>
	<img src="img/雪球logo.png"/>
    <a href="#home">会员首页</a>
    <a href="#privileges">会员特权</a>
    <a href="#details">特权详情</a>
    <a href="#login">用户登录</a>
    <a href="#signup">开通会员</a>
</nav> -->
    <div class="container" id="cnt" style="width: 100px;height: 100px;float: left;">
        <section id="home">
            <h2>身份特权</h2>
            <p>尊贵图标</p>
            <img src="img/图片/1.png" alt="text" title="text" width="100" height="100" />
            <p>昵称红名</p>
            <img src="img/图片/2.png" alt="text" title="text" width="100" height="100" />
            <p>个性铭牌</p>
            <img src="img/图片/3.png" alt="text" title="text" width="100" height="100" />
        </section>

        <section id="privileges">
            <h2>贴吧特权</h2>
            <img src="img/图片/4.png" alt="text" title="text" width="100" height="100" />
            <p>更多链接</p>
            <img src="img/图片/5.png" alt="text" title="text" width="100" height="100" />
            <p>等级加速</p>
            <img src="img/图片/6.png" alt="text" title="text" width="100" height="100" />
            <p>补签卡</p>
            <img src="img/图片/7.png" alt="text" title="text" width="100" height="100" />
        </section>


    </div>
    <!-- <div style="widt
<div style=" position:relative;border: 1px solid red;"> -->
    <div style="position:absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
    width: 1000px;height: 500px;border: 0px solid gold;text-align:center;line-height:100px">



        <p>请选择您要购买的会员类型：</p>
        <form action="/process_payment" method="post">
            <label>
                <input type="radio" name="membership_type" value="basic">
                基础会员 - $20
            </label><br>
            <label>
                <input type="radio" name="membership_type" value="premium">
                高级会员 - $30
            </label><br>
            <label>
                <input type="radio" name="membership_type" value="deluxe">
                豪华会员 - $40
            </label><br>
            <p>输入您的支付信息：</p>
            <label for="card_number">卡号：</label>
            <input type="text" id="card_number" name="card_number" required><br>
            <label for="expiry_date">过期日期：</label>
            <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/YY" required><br>
            <label for="cvv">CVV：</label>
            <input type="text" id="cvv" name="cvv" required><br>
            <button type="submit">支付</button>
        </form>
    </div>
    </div>
    </div>
</body>

</html>